﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles{
    <style>
        .layoutrow {
            display: flex;
            justify-items: left;
            margin-bottom: 10px;
        }

        .layout-title {
            padding: 0px 8px;
            font-size: 14px;
            flex: 0 0 150px;
        }

        .layout-content {
            padding: 0px 8px;
            text-align: left;
        }
    

        .layui-input-block-w{
            margin-left:120px;
        }
        .layui-form-item-b{
            margin-bottom:0px !important;
        }
    </style>
}

<div class="layui-row layui-col-space10">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" lay-filter="search-form"  action="">
                    <input type="hidden" id="checkedIds" name="checkedIds" value="" />
                    <input type="hidden" id="contentAttrIds" name="contentAttrIds" value="" />
                    <input type="hidden" id="groupNames" name="groupNames" value="" />
                    <input type="hidden" id="tagNames" name="tagNames" value="" />
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs4"><label class="layui-form-label" style="width:90px;">标题</label>
                        <div class="layui-input-block layui-input-block-w">
                                  <input type="text" name="name" placeholder="" class="layui-input">
                        </div></div>
                        <div class="layui-col-xs4">
                             <label class="layui-form-label" style="width:90px;">栏目</label>
                          
                            <div class="layui-input-inline" style="width:240px;">
                                <input type="hidden" id="channelId" name="channelId" value="" />
                                <input id="channelcascader" name="ChannelUrl" />
                                
                            </div>
                       
                           
                            <div class="layui-form-mid layui-word-aux"><input type="checkbox" name="containschildren" lay-skin="primary" title="包含子集栏目" checked=""></div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width:90px;">审核状态</label>
                            <div class="layui-input-inline" style="width:auto;" id="div_checkedList">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width:90px;">内容标签</label>
                            <div class="layui-input-block layui-input-block-w" id="div_tagNamesList">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width:90px;">添加时间</label>
                            <div class="layui-input-block layui-input-block-w">
                                <input type="text" class="layui-input" id="createtime" name="createtime" placeholder="请选择开始日期范围">
                            </div>
                        </div>
                        <div class="layui-col-xs4">
                            <label class="layui-form-label" style="width:90px;">内容属性</label>
                            <div class="layui-input-block" style="width:auto;" id="div_contentAttrList">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="width:90px;">内容分组</label>
                    <div class="layui-input-block" style="width:auto;" id="div_groupNamesList">
                        
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="text-align:right;">
                        <button class="pear-btn pear-btn-md pear-btn-primary" id="btnSearch" lay-submit lay-filter="content-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="pear-btn pear-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                    </div>
                </div>
                </form>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="content-table" lay-filter="content-table"></table>
            </div>
        </div>
</div>


@{await Html.RenderPartialAsync("_CheckedState");}
@section scripts{
    <script>
                layui.use([ 'form', 'lscom' , 'dtree','dropdown','table','layCascader','laydate'], function () {
                    let dtree = layui.dtree;
                    let form = layui.form;
                    let $ = layui.jquery;
                    let lscom = layui.lscom;
                    let  dropdown  =layui.dropdown;
                    let layCascader = layui.layCascader;
                    let table =layui.table;
                    let laydate =layui.laydate;
                    let MODULE_PATH = "/Cms/Content/";
                    let channelId = 0;

                     //开始日期
                    laydate.render({
                        elem: '#createtime',
                        range: true
                    });

                    var istoolbar = $.trim($("#content-bar").html())=="" ? true : false;
                    let cols = [
                        [{
                            type: 'checkbox',
                             width:80
                        },
                        {
                            title: '标题',
                            field: 'title',
                            align: 'left'
                        },
                       {
                            title: '添加时间',
                            field: 'createDate',
                            align: 'left',
                            width:150
                        },
                        {
                            title: '状态',
                            field: 'checkedState',
                            templet:'#checked-state',
                            align: 'left',
                             width:140
                        },
                        {
                            title: '操作',
                           templet: '#content-bar',
                            align: 'center',
                            width: 150,
                            hide:istoolbar
                        }
                        ]
                    ];

                    table.render({
                        elem: '#content-table',
                        url: MODULE_PATH + "GetList",
                        page: true,
                        cols: cols,
                        skin: 'line',
                        height: 'full-165',
                        defaultToolbar: [],
                        done:function(res, curr, count){
                        
                        }
                    });

                    table.on('tool(content-table)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'Delete') {
                            window.remove(data.id);
                        } else if (obj.event === 'Update') {
                            window.edit(data.id);
                        }
                    });

                    table.on('toolbar(content-table)', function (obj) {
                        if (obj.event === 'Add') {
                            window.add();
                        } else if (obj.event === 'refresh') {
                            window.refresh();
                        } else if (obj.event === 'Delete') {

                            let checkData = table.checkStatus(obj.config.id).data;
                            if (checkData.length === 0) {
                                parent.layer.msg("未选中数据", {
                                    icon: 3,
                                    time: 1000
                                });
                                return false;
                            }
                            var ids = checkData.map(function (d) { return d.id; });
                            window.remove(ids.join(','));
                        }
                    });

                


             form.on('submit(content-query)', function (data) {
                           table.reload('content-table', {
                                where: data.field
                            });
                          return false;
                       });


                    lscom.ajax({
                        url: "/Cms/Channel/GetChannleCascader?channelId=0",
                        type:'GET',
                        lsHandleError: false
                    }).done(function(data) {
                        if (data.code == 0) {
                            layCascader({
                                elem: '#channelcascader',
                                options: data.data,
                                clearable: true
                            });
                        }
                    }).fail(function(message) {
                        lscom.notify.error(message);
                    });

                    lscom.ajax({
                        url: "/Cms/Content/GetContentDropdown",
                        type:'GET',
                        lsHandleError: false
                    }).done(function (data) {
                        if (data.code == 0) {
                            console.log(data);
                                //重定义内容
                                var checkedListHtml ='',contentAttrListHtml='',groupNamesListHtml='',tagNamesList='';
                                $.each(data.data.checkedList,function(k,v){
                                 checkedListHtml+='<input type="checkbox" name="checkedList" lay-skin="primary" title="'+v.title+'"  value="'+v.id+'" lay-filter="chkaudit">';
                                });
                                $.each(data.data.contentAttrList,function(k,v){
                                 contentAttrListHtml+='<input type="checkbox" name="contentAttrList" lay-skin="primary" title="'+v.title+'"  value="'+v.id+'"  lay-filter="chkattr">';
                                });
                                $.each(data.data.groupNamesList,function(k,v){
                                 groupNamesListHtml+='<input type="checkbox" name="groupNamesList" lay-skin="primary" title="'+v.title+'"   value="'+v.id+'" lay-filter="chkgroupName">';
                                });
                                 $.each(data.data.tagNamesList,function(k,v){
                                 tagNamesList+='<option value="'+v.title+'">'+v.title+'</option>';
                                });
                                $('#div_checkedList').html(checkedListHtml);
                                $('#div_contentAttrList').html(contentAttrListHtml);
                                $('#div_groupNamesList').html(groupNamesListHtml);
                                $('#div_tagNamesList').html('<select name="tags" lay-filter="tagsfilter" lay-search=""><option value="">直接选择或搜索选择</option>'+tagNamesList+'</select>');
                               
                                form.render(null, 'search-form');

                                form.on('select(tagsfilter)', function(data){
                                    $("#tagNames").val(data.value);
                                   
                                 });
                                 form.on('checkbox(chkaudit)', function(data){
                                      var  items=[];
                                      $("input[name='checkedList']:checked").each(function(){
                                          items.push($(this).val())
                                      });
                                      $('#checkedIds').val(items.join(','));
                                 });
                                 form.on('checkbox(chkattr)', function(data){
                                      var  items=[];
                                      $("input[name='contentAttrList']:checked").each(function(){
                                          items.push($(this).val())
                                      });
                                      $('#contentAttrIds').val(items.join(','));
                                 });
                                 form.on('checkbox(chkgroupName)', function(data){
                                      var  items=[];
                                      $("input[name='groupNamesList']:checked").each(function(){
                                          items.push($(this).val())
                                      });
                                      $('#groupNames').val(items.join(','));
                                 });
                        }
                    }).fail(function (message) {
                        lscom.notify.error(message);
                    })

               

                    dtree.on("node(channel-tree)", function (obj) {
                        $('#channelId').val(obj.param.nodeId);
                        channelId =obj.param.nodeId;
                    });

                    $("#btn_TreeFuzzySearch").click(function () {
                        var input = $("input[name='channelame']").val();
                        // 调用内置函数搜索节点
                        TreeFuzzySearch.fuzzySearch(input);
                        if ($("#channel-tree>li").hasClass('layui-hide') ) {
                            $("#channel-tree-empty").removeClass("layui-hide");
                        } else {
                            $("#channel-tree-empty").addClass("layui-hide");
                        }
                    });

                    window.add = function () {
                   
                    if (channelId === 0) {
                                parent.layer.msg("未选中数据", {
                                    icon: 3,
                                    time: 1000
                                });
                                return false;
                            }
                    parent.layui.admin.jump(99001,"新增内容",MODULE_PATH + 'Create' + lscom.utils.formatString("?id={0}", channelId));
                   
                    }
                    window.edit = function (id) {

                        parent.layui.admin.jump(99002,"修改内容",MODULE_PATH + 'Edit' + lscom.utils.formatString("?id={0}", id));
                   
                    }

                    window.remove = function (data) {
                    parent.layer.confirm('确定删除吗?', {
                        icon: 3,
                        title: '提示'
                    }, function (index) {
                        parent.layer.close(index);
                        let waitIndex = parent.layer.load(2);
                        lscom.ajax({
                            url: MODULE_PATH + 'Delete',
                            data: JSON.stringify({ "ids": data }),
                            lsHandleError: false
                        }).done(function (data) {
                            if (data.code == 0) {
                                lscom.notify.success(data.message);
                                dtree.reload("channel-tree");
                            }
                        }).fail(function (message) {
                            lscom.notify.error(message);
                        }).always(function () {
                            parent.layer.close(waitIndex);
                        });
                    });
                    }
                    window.saveCallback = function (data) {
                    parent.layer.close(data.index);
                        lscom.notify.success(data.message);
                        dtree.reload("channel-tree");
                    }
                    window.refresh = function () {
                        dtree.reload("channel-tree");
                    }
                });
    </script>
}
